<template>
  <div class="box">
    <h1>B组件,{{ num }}</h1>
    <div v-for="item in goods.filterList">
      {{ item.name }}----{{ item.price }}
    </div>
  </div>
</template>

<script setup lang="ts">
// import { storeToRefs } from "pinia";
import { toRefs } from "vue";
import { useCount } from "../../store/count.ts";
import { useGoods } from "../../store/goods.ts"; //Hook
// const { num } = useCount(); //解构赋值会导致状态机数据失去响应性
// const { num } = storeToRefs(useCount()); //响应性处理
const { num } = toRefs(useCount()); //响应性处理
const goods = useGoods();
</script>

<style scoped>
.box {
  height: 400px;
  border: 1px solid #333;
}
</style>
